<template>
  <div class="edit-content" ref="bodyHeight">
    <div class="left">
      <div class="tool-list">
        <div @click="state.currIndex = 0">一键排版</div>
        <div @click="state.currIndex = 1">素材</div>
        <div @click="state.currIndex = 2">模板</div>
      </div>
      <div class="box-side">
        <!-- 一键排版 -->
        <div class="side-left" v-if="state.currIndex == 0">
          <div class="item" v-for="item in state.renderList" :key="item.id">
            <div class="c-cover" @click="funcCompose(item, 'render')">
              <img :src="item.cover" />
            </div>
            <div class="c-info">{{ item.name }}</div>
          </div>
        </div>
        <!-- 一键排版 -->
        <!-- 素材 -->
        <div class="content-material" v-if="state.currIndex == 1">
          <div
            class="material-list"
            v-for="item in state.materialList"
            :key="item.id"
            @click="renderMaterial($event, item)"
          >
            <div style="width: 100%" v-html="item.code"></div>
          </div>
        </div>
        <!-- 素材 -->
        <!-- 模板 -->
        <div class="content-template" v-if="state.currIndex == 2">
          <div
            class="template-list"
            v-for="item in state.templateList"
            :key="item.id"
          >
            <!-- 模板封面 -->
            <div class="template-cover">
              <img :src="item.cover" />
            </div>
            <div class="template-select">
              <div
                class="select-item"
                @click.stop="clickTemplateEvent(item, 'sort')"
              >
                <AppstoreAddOutlined :style="{ fontSize: '42px' }" /><span
                  >分块使用</span
                >
              </div>
              <div
                class="select-item"
                @click.stop="clickTemplateEvent(item, 'all')"
              >
                <AppstoreOutlined :style="{ fontSize: '42px' }" /><span
                  >整套使用</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 模板 -->
      </div>

      <!-- 模板样式列表 -->
      <div class="style-template-sort" v-show="state.styleTemplateSort">
        <div class="sort-exit" @click="state.styleTemplateSort = false">
          <ArrowLeftOutlined />退出分块使用
        </div>
        <div class="sort-content" ref="sortContent">
          <div v-html="state.sortContent"></div>
        </div>
      </div>
      <!-- 模板样式列表 -->
    </div>
    <div class="main" ref="toolbar">
      <vue-ueditor-wrap
        v-model="state.content"
        editor-id="editor"
        :config="state.editorConfig"
        :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
        class="pd-10"
      />
      <div class="showContent" v-show="state.config.showAlter">
        <div class="topbar">
          <div class="top">
            <span>一键排版样式预览</span>
            <div class="">
              <a-button type="primary" size="small" @click="funcInsert"
                >插入</a-button
              >
              <CloseCircleFilled
                @click="state.config.showAlter = false"
                class="mg-left-10"
                style="font-size: 18px; vertical-align: -4px"
              />
            </div>
          </div>
          <div class="body">
            <a-row>
              <a-col :span="12">
                <span>字体大小</span>
                <a-slider
                  v-model:value="state.config.fontSize"
                  :min="12"
                  :max="75"
                  @change="changeSlider"
              /></a-col>
              <a-col :span="12">
                <span>字符间距</span>

                <a-slider
                  v-model:value="state.config.letterSpacing"
                  :min="0"
                  :max="5"
                  @change="changeSlider"
              /></a-col>
              <a-col :span="12">
                <span>字符高度</span>

                <a-slider
                  v-model:value="state.config.lineHeight"
                  :min="0"
                  :max="100"
                  @change="changeSlider"
              /></a-col>
              <a-col :span="12">
                <span>模块间距</span>
                <a-slider
                  v-model:value="state.config.marginBottom"
                  :min="0"
                  :max="50"
                  @change="changeSlider"
              /></a-col>
            </a-row>
          </div>
        </div>
        <div
          class="html-content"
          ref="htmlContent"
          v-html="state.fomatContent"
        ></div>
      </div>
    </div>
    <!-- <div class="right">right</div> -->
  </div>
</template>
<style lang="scss" scoped>
.edit-content {
  height: 100vh;
  display: flex;
  .left,
  .right {
    flex: 0 0 350px;
    position: relative;
  }
  .box-side {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 30px);
  }
  .main {
    flex: 0 0 640px;
    position: relative;
    .showContent {
      position: absolute;
      z-index: 1000;
      left: 10px;
      top: 10px;
      right: 10px;
      bottom: 10px;
      background: white;
      border: solid 1px #dfdfdf;
      display: flex;
      flex-direction: column;
      .topbar {
        position: sticky;
        top: 10px;
        border-bottom: solid 1px #dfdfdf;
        padding: 10px;
        .top {
          display: flex;
          justify-content: space-between;
        }
        .body {
          .ant-col {
            display: flex;
            padding-top: 5px;
            .ant-slider {
              flex: 1;
              margin: 5px;
            }
            > span {
              padding-right: 8px;
            }
          }
        }
      }
      .html-content {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        padding: 10px;
        :deep(p) {
          margin-bottom: 10px;
        }
      }
    }
  }
  .side-left {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    .item {
      //   width: 180px;
      flex: 0 0 50%;
      padding: 5px;
      img {
        max-width: 100%;
        vertical-align: top;
      }
      .c-info {
        text-align: center;
      }
      .c-cover {
        cursor: pointer;
      }
    }
  }
}
#edui1_iframeholder {
  height: calc(100vh);
}
.tool-list {
  display: flex;
  div {
    flex: 1;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
}
.material-list {
  min-height: 60px;
  cursor: pointer;
  padding: 5px 10px;
  border-top: 1px dashed #ddd;
  margin-bottom: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-template {
  padding: 0 10px;
  .template-list {
    margin-bottom: 10px;
    min-height: 200px;
    overflow: visible;
    position: relative;
    overflow: hidden;
    background: white;
    transition: all, 0.3s, ease;
    .template-cover {
      width: 100%;
      img {
        max-width: 100%;
      }
    }
    .template-select {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      box-align: center;
      align-items: center;
      justify-content: space-around;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      .select-item {
        display: flex;
        box-align: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        span {
          color: white;
          font-size: 16px;
        }
        &:hover {
          color: #f7ba2a;
          span {
            color: #f7ba2a;
          }
        }
      }
    }
    &:hover {
      .template-select {
        opacity: 1;
      }
    }
  }
}

.style-template-sort {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  z-index: 9;
  .sort-exit {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4c637b;
    background: #eff2f7;
    cursor: pointer;
    .anticon {
      font-size: 14px;
      margin-right: 5px;
    }
  }
  .sort-content {
    width: 100%;
    height: calc(100vh - 40px);
    overflow: hidden;
    overflow-y: auto;
  }
  :deep(.template-sort-cover) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    padding: 10px 0;
    box-sizing: border-box;
  }
}
</style>
<script lang="ts" setup>
import { reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { temps } from "./temp";
import {
  funcComposeEvent,
  funcRenderMaterial,
  funcTemplateEvent,
} from "./formatContent.js";
import {
  AppstoreAddOutlined,
  AppstoreOutlined,
  ArrowLeftOutlined,
  CloseCircleFilled,
} from "@ant-design/icons-vue";
import jQuery from "jquery";
import { material } from "./material";
import { template } from "./template";
import { message } from "ant-design-vue";
const { proxy }: any = getCurrentInstance();
const state: any = reactive({
  renderList: [],
  materialList: [],
  templateList: [],
  content: "",
  toolHeight: 0,
  currIndex: 0,
  sortContent: "",
  styleTemplateSort: false,
  editorConfig: {
    elementPathEnabled: false, //隐藏元素路径
    autoHeightEnabled: false, //是否自动长高
    autoFloatEnabled: false, //是否保持toolbar的位置不动
    initialFrameWidth: "100%", //宽度随浏览器自适应
    initialFrameHeight: "100%",
    serverUrl: "/ueditor-api", // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
    UEDITOR_HOME_URL: "/static/UEditorPlus/", // 访问 UEditor 静态资源的根路径，可参考常见问题1
  },
  fomatContent: "",
  config: {
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 24,
    marginBottom: 0,
    showAlter: false,
  },
});
//插入内容
const funcInsert = () => {
  // state.content = state.fomatContent;
  state.content = proxy.$refs.htmlContent.innerHTML;
  state.config.showAlter = false;
};
//获取内容格式
const funcCompose = (datas: any, mod: any) => {
  if (!state.content) {
    message.info("请填写内容后，再一键排版");
    return false;
  }
  state.fomatContent = funcComposeEvent(
    "render",
    state.content,
    datas,
    state.config
  );
  state.config.showAlter = true;
};
//自动切换
const reizeWindow = () => {
  state.toolHeight = proxy.$refs.toolbar.offsetHeight;
};
const changeSlider = () => {
  // console.info(state.config);
  jQuery('[ref="contentRef"]').css({
    fontSize: (state.config.fontSize || 14) + "px",
    letterSpacing: (state.config.letterSpacing || 2) + "px",
    lineHeight: (state.config.lineHeight || 24) + "px",
    marginBottom: (state.config.marginBottom || 0) + "px",
  });
};
//font-size: 14px; line-height: 24px; letter-spacing: 2px;margin-bottom:0px
const auto_height = () => {
  //.edui-editor-toolbarbox
  let toolbarboxHeight: any = document.querySelector(
    ".edui-editor-toolbarbox"
  )?.clientHeight;
  let bottomContainerHeight: any = document.querySelector(
    ".edui-editor-bottomContainer"
  )?.clientHeight;
  let bodys: any = document.querySelectorAll(".edui-editor-iframeholder");
  bodys[0].style.height = `calc(100vh - ${
    toolbarboxHeight + bottomContainerHeight
  }px - 20px)`;
};
const renderMaterial = (event: any, datas: any) => {
  funcRenderMaterial(event, datas);
};
//模板切换
const clickTemplateEvent = (item: any = {}, mod: any = "all") => {
  if (mod == "sort") {
    state.styleTemplateSort = true;
    state.sortContent = item.code;
    proxy.$refs.sortContent.scrollBy(0, 0);
    jQuery(".sort-content").scroll(0, 0);
  }
  funcTemplateEvent(item, mod);
};
onMounted(() => {
  nextTick(() => {
    window.onresize = () => {
      reizeWindow();
      auto_height();
    };
    state.renderList = temps;
    state.materialList = material;
    state.templateList = template;
  });
});
</script>edui-toolbar